<div class="docs-section">
    <h1 id="validate" class="page-header">表单校验</h1>

    <h2 id="validate-base">基本说明</h2>
    <p>
        提供对表单输入的及时校验。
    </p>
    <div class="docs-example">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-2 control-label">编码</label>
                <div class="col-md-10">
                    <input class="form-control" name="type" dol-validate="minLength[6]" placeholder="至少6位" />
                </div>
            </div>
        </form>
    </div>
    <div class="docs-code">
        <pre>
            <code class="html">&lt;div class="form-group"&gt;
    &lt;label class="col-md-2 control-label"&gt;编码&lt;/label&gt;
    &lt;div class="col-md-10"&gt;
        &lt;input class="form-control" name="code" dol-validate="minLength[6]" placeholder="至少6位" /&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>
        </pre>
    </div>
    <div class="docs-code">
        <pre>
            <code class="js">//validate
Dolphin.validate.monitor($('input[name="code"]');</code>
        </pre>
    </div>
    <p>
        获取校验结果
    </p>
    <div class="docs-code">
        <pre>
            <code class="js">//validate result
Dolphin.validate($('input[name="code"]')  // => true/false</code>
        </pre>
    </div>

    <h2 id="validate-info">使用说明</h2>
    <p>
        在输入DOM元素上添加属性dol-validate，值为需要的<a href="#validate-define">校验规则</a>。在输入元素发生change事件和keypress事件时，会进行校验，若校验不通过则显示错误信息。
    </p>

    <h2 id="validate-define">校验规则</h2>
    <p>
        校验规则存在Dolphin.validate.method中，当需要自定义校验规则时，对Dolphin.validate.method进行扩展。<br/>
        扩展校验规则需提供两个属性：<br/>
        validator：校验函数（校验元素(jQuery selector)，输入参数[*]），返回true/false<br/>
        message: 支持两种格式，字符串/函数<br/>
        <span style="padding-left:20px;">
            字符串：替换其中特殊字符后显示。替换规则：{label} -> 校验元素名称；{n} -> n为从1开始的数字，校验函数对应参数<br/>
        </span>
        <span style="padding-left:20px;">
            函数：参数：校验元素名称（String），校验元素(jQuery selector)，输入参数[*]；返回错误提示信息，直接用于展示
        </span>
    </p>
    <div class="docs-code">
        <pre>
            <code class="js">//validate message(string)
validate.method.maxLength = {
    validator : function(selector, maxLength){
        if(selector.val() && selector.val().length > maxLength){
            return false;
        }else{
            return true;
        }
    },
    message : "{label}长度不能超过{1}"
};</code>
        </pre>
    </div>
    <div class="docs-code">
        <pre>
            <code class="js">//validate message(function)
Dolphin.validate.method.minLength = {
    validator : function(selector, minLength){
        if(selector.val() && selector.val().length < minLength){
            return false;
        }else{
            return true;
        }
    },
    message : function(label, selector, length){
        return label + "长度不能低于" + length;
    }
};</code>
        </pre>
    </div>
    <p>
        需要多个校验规则时，在dol-validate的值中用,分隔。
    </p>
    <div class="docs-code">
        <pre>
            <code class="html">&lt;input class="form-control" name="code" dol-validate="required,minLength[6]"/&gt;</code>
        </pre>
    </div>

    <h2 id="validate-function">默认提供校验规则</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>方法</th>
                <th>校验规则</th>
                <th>提示信息</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>required</td>
                <td>必填</td>
                <td>"{label}不能为空"</td>
                <td></td>
            </tr>
            <tr>
                <td>later</td>
                <td>otherDateId</td>
                <td>结束时间不能早于开始时间</td>
                <td>
                    主要用于时间起止。参数说明：<br/>
                    otherDateId：开始时间input的id
                </td>
            </tr>
            <tr>
                <td>before</td>
                <td>otherDateId</td>
                <td>开始时间不能晚于结束时间</td>
                <td>
                    主要用于时间起止。参数说明：<br/>
                    otherDateId：结束时间input的id
                </td>
            </tr>
            <tr>
                <td>maxLength</td>
                <td>maxLength</td>
                <td>{label}长度不能超过{1}</td>
                <td>
                    参数说明：<br/>
                    maxLength：最大长度
                </td>
            </tr>
            <tr>
                <td>minLength</td>
                <td>minLength</td>
                <td>{label}长度不能低于{1}</td>
                <td>
                    参数说明：<br/>
                    maxLength：最小长度
                </td>
            </tr>
            <tr>
                <td>email</td>
                <td>无</td>
                <td>是否为邮箱</td>
                <td></td>
            </tr>
            <tr>
                <td>number</td>
                <td>无</td>
                <td>是否为整数</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>